<template>
  <div class="container">
    <el-card class="box-card">
      <queryQuestions @btnOk="btnOk"></queryQuestions>
      <el-tabs v-model="chkState" type="card" @tab-click="tabClick">
        <el-tab-pane label="全部" name="3"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <el-alert
        :title="`数据一共 ${tableData.counts} 条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 20px"
      >
      </el-alert>
      <el-table
        :data="tableData.items"
        style="width: 100%"
        :header-cell-style="{ backgroundColor: '#fafafa' }"
      >
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120">
          <template slot-scope="{ row }">
            {{ row.questionType | getQuestionType }}
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280">
          <template slot-scope="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180">
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80">
          <template slot-scope="{ row }">
            {{ row.difficulty | getdifficulty }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column label="审核状态" width="120">
          <template slot-scope="{ row }">
            {{
              row.chkState === 0
                ? '待审核'
                : row.chkState === 1
                ? '通过'
                : '拒绝'
            }}
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="150">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <el-table-column label="发布状态" width="150">
          <template slot-scope="{ row }">
            {{ row.publishState === 1 ? '上架' : '下架' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="look(row.id)"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="toExamine(row.id)"
              :disabled="row.chkState !== 0"
              >审核</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="row.publishState !== 0"
              @click="routerChange(row.id)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="UpperAndLower(row)">{{
              row.publishState === 0 ? '上架' : '下架'
            }}</el-button>
            <el-button
              type="text"
              size="small"
              @click="del(row)"
              :disabled="row.publishState !== 0"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination :tableData="tableData" @changePage="changePage"></pagination>
    </el-card>
    <titlePreview
      :preview="preview"
      :showDialog.sync="showDialog"
    ></titlePreview>
    <el-dialog
      :visible="showDialogExamine"
      title="题目审核"
      width="400px"
      @close="close"
    >
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-radio v-model="form.chkState" :label="1">通过</el-radio>
          <el-radio v-model="form.chkState" :label="2">拒绝</el-radio>
        </el-form-item>
        <el-form-item>
          <el-input
            type="textarea"
            v-model="form.chkRemarks"
            placeholder="请输入审核意见"
          ></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-row type="flex" justify="end" align="bottom">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="onSubmit">确认</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  remove,
  detail,
  choice,
  choicePublish,
  choiceCheck
} from '@/api/hmmm/questions.js'
import titlePreview from '@/module-hmmm/components/titlePreview'
import queryQuestions from '@/module-hmmm/components/queryQuestions'
import pagination from '@/module-hmmm/components/pagination'
export default {
  data () {
    return {
      chkState: '3',
      tableData: {},
      formInline: {
        page: 1,
        pagesize: 5
      },
      preview: {},
      showDialog: false,
      showDialogExamine: false,
      form: {
        chkState: 1,
        chkRemarks: '',
        id: ''
      }
    }
  },
  components: {
    queryQuestions,
    pagination,
    titlePreview
  },
  created () {
    this.getList()
  },
  methods: {
    routerChange (id) {
      this.$router.push({ path: '/questions/new', query: { id } })
    },
    toExamine (id) {
      this.form.id = id
      this.showDialogExamine = true
    },
    async onSubmit () {
      if (this.form.chkRemarks.trim() === '') {
        this.$message.warning('请输入审核意见')
        return
      }
      await choiceCheck(this.form)
      this.$message.success('操作成功')
      this.getList()
      this.close()
    },
    close () {
      this.form = {
        chkState: 1,
        chkRemarks: '',
        id: ''
      }
      this.showDialogExamine = false
    },
    async look (id) {
      const { data } = await detail({ id })
      this.preview = data
      this.showDialog = true
    },
    async del (row) {
      await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(row)
      this.$message.success('删除成功')
      this.getList()
    },
    async UpperAndLower (row) {
      await this.$confirm(
        `您确认${row.publishState === 0 ? '上架' : '下架'}这道题目吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
      const publishState = row.publishState === 0 ? 1 : 0
      await choicePublish({
        ...row,
        publishState
      })
      this.$message.success(`${row.publishState === 0 ? '上架' : '下架'}成功`)
      this.getList()
    },
    tabClick () {
      if ((this, this.chkState === '3' && this.formInline.chkState)) {
        delete this.formInline.chkState
      } else {
        this.formInline.chkState = this.chkState
      }
      this.getList()
    },
    async getList () {
      const { data } = await choice(this.formInline)
      this.tableData = data
    },
    async btnOk (formInline) {
      this.formInline = { ...this.formInline, ...formInline }
      this.getList()
    },
    async changePage (page) {
      this.formInline = { ...this.formInline, ...page }
      this.getList()
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 10px;
}
</style>
